<!-- 订单 -->
<template>
	<view>
		<ul>
			<li :class="active==index ?'active':''" @tap="fun2(item,index)" v-for="(item,index) in data" :key='index'>
				{{item}}
			</li>
		</ul>
		<div class="d1" :class="show==index ?'show':'no'" v-for="(item,index) in timesList[0].data" :key='index'>
			<div class="d2">
				<span>2020-01-01 14:00</span>
				<span class="d3"><b>待付款</b></span>
			</div>
			<div class="d5">
				<img :src="item.timesUrl" class="d4">
				<div class="dingdan">
					<h3>{{item.timeText3}}</h3>
					<h2 class="jiage"><b>￥{{item.price}}</b></h2><br>
					<span>经典口味，五袋装&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数量1</span>
				</div>
			</div>
			<div class="d7">
				<img :src="item.timesUrl" class="d6">
				<div class="dingdan">
					<h3>每天帮你照顾好自己，鲜萃每日坚果</h3>
					<h2 class="jiage"><b>￥29.00</b></h2><br>
					<span>经典口味，五袋装&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数量1</span>
				</div>
			</div>
			<br><span>共2件商品 支付总额：￥45.00</span></br>
			<button class="zhifu">立即支付</button>
		</div>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				data: ['全部', '待付款', '已完成', '已取消'],
				show: 0,
				active: 0,
				list: []

			}
		},
		computed: {
			...mapState([
				'timesList'
			])
		},
		methods: {
			fun2(item, index) {
				this.show = this.active
				this.active = index
			}
		},
		onLoad() {
			let that = this
			uni.$on('pink', data => {
				that.list = data
				console.log(that.list);
			})
		},
		onUnload() {
			uni.$off('pink')
		}
	}
</script>

<style lang="scss" scoped>
	body{
		background-color:#e9e9e9 ;
	}
	* {
		margin: 0;
		padding: 0;
	}

	ul {
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 50px;
		list-style: none;
	}

	ul li {
		width: 90px;
		padding: 5px 10px;
		box-sizing: border-box;
		text-align: center;
		line-height: 50px;


	}

	.active {
		border-bottom: 1px solid red;
		color: red;
	}

	.d1 {
		// display: none;
		height: 300px;
		border-top: 1px solid silver;
		border-left: 1px solid silver;
		border-right: 1px solid silver;
		border-bottom: 1px solid silver;
		margin-left: 5px;
		margin-top: 20px;
		background-color: white;
	}

	.d1.show {
		display: block;
	}

	.d1.no {
		display: none;
	}

	.d2 {
		border-bottom: 1px solid silver;
	}

	.d3 {
		color: yellow;
		margin-left: 210px;
	}

	.d4 {
		width: 100px;
		height: 100px;
		margin-left: 10px;
		margin-top: 20px;
	}

	.dingdan {
		margin-left: 118px;
		margin-top: -100px;
	}

	.jiage {
		color: red;
		margin-top: 6px;
	}

	.d5 {
		border-bottom: 1px solid silver;
	}

	.d6 {
		width: 100px;
		height: 100px;
		margin-left: 10px;
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.d7 {
		border-bottom: 1px solid silver;
	}

	.zhifu {
		width: 80px;
		height: 32px;
		font-size: 13px;
		text-align: center;
		border-radius: 20px;
		line-height: 32px;
		float: right;
		background-color: #f44545;
		color: white;
		margin-top: -38px;
		margin-right: 10px;
	}
</style>